<template>
  <div>
    <a-dropdown>
      <div class="header-avatar" style="cursor: pointer">
        <a-avatar class="avatar" shape="circle" icon="user"/>
        <span class="name">{{ name || '未知' }}</span>
      </div>
      <a-menu :class="['avatar-menu']" slot="overlay">
        <!--
        <a-menu-item>
          <a-icon type="user" />
          <span>个人中心</span>
        </a-menu-item>
        <a-menu-item>
          <a-icon type="setting" />
          <span>设置</span>
        </a-menu-item>
        <a-menu-divider />
        -->
        <a-menu-item @click="logout">
          <a-icon style="margin-right: 8px;" type="poweroff"/>
          <span>退出登录</span>
        </a-menu-item>
        <a-menu-item @click="openChangePwd">
          <a-icon style="margin-right: 8px;" type="tools"/>
          <span>修改密码</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <a-modal
      title="修改密码"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="changePwdOk"
      @cancel="changePwdCancel"
    >
      <a-spin :spinning="confirmLoading">
        <a-form :form="form">

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="原密码"
          >
            <a-input type="password" placeholder="请输入原密码" v-decorator="[ 'oldPwd', {rules: [{ required: true, message: '请输入原密码!' }]}]"/>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="新密码"
          >
            <a-input type="password" placeholder="请输入新密码" v-decorator="[ 'pwd', {rules: [{ required: true, message: '请输入新密码!' }]}]"/>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="确认新密码"
          >
            <a-input type="password" placeholder="请确认新密码" v-decorator="[ 'pwdVerify', {rules: [{ required: true, message: '请确认新密码!' }]}]"/>
          </a-form-item>

        </a-form>
      </a-spin>
      <div slot="footer">
        <a-button :style="{marginRight: '8px'}" @click="changePwdCancel">取消</a-button>
        <a-button @click="changePwdOk" type="primary" :loading="confirmLoading">确认</a-button>
      </div>

    </a-modal>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  import pick from 'lodash.pick'
  import { changePwd } from '@/api/system'
  import { FormModalMixin } from '@/mixins/FormModalMixin'

  export default {
    name: 'HeaderAvatar',
    mixins: [FormModalMixin],
    data () {
      return {
        name: null,
        avatar: '@/assets/img/defaultAvatar.jpeg',
        visible: false,
        confirmLoading: false
      }
    },
    mounted () {
      this.name = this.userInfo().userName
    },
    methods: {
      ...mapGetters(['userInfo']),
      ...mapActions(['Logout']),
      logout () {
        this.Logout().then(() => {
          this.$router.push('/login')
        })
      },
      openChangePwd () {
        this.resetFields()
        this.visible = true
      },
      changePwdOk () {
        console.log(this.form)
        this.form.validateFields((err, values) => {
          if (!err) {
            if (values.pwd !== values.pwdVerify) {
              this.$message.error('两次输入的密码不一致')
            } else {
              const formData = pick(Object.assign(this.model, values), 'oldPwd', 'pwd')
              this.confirmLoading = true
              changePwd(formData).then(res => {
                if (res.code === 1) {
                  this.$message.success(res.msg)
                  this.visible = false
                } else {
                  this.$message.warning(res.msg)
                }
              }).finally(() => {
                this.confirmLoading = false
              })
            }
          }
        })
      },
      changePwdCancel () {
        console.log('Clicked cancel button')
        this.visible = false
      }
    }
  }
</script>

<style lang="less">
  .header-avatar {
    display: inline-flex;

    .avatar, .name {
      align-self: center;
    }

    .avatar {
      margin-right: 8px;
    }

    .name {
      font-weight: 500;
    }
  }

  .avatar-menu {
    width: 150px;
  }

</style>
